import React, { Component } from "react";
import "./index.css";

export default class Item extends Component {

  state = {mouse:false}

  handleMouse = (flag) =>{
    return ()=>{
      this.setState({mouse:flag})
    }
  }

  handleCheck = id => {
    return (event) => {
      console.log(id,event.target.checked) 
      this.props.updateTodo(id,event.target.checked);
    }
  }

  handleDelete = (id) => {
    if(window.confirm('Are you sure to delete it?')){
      this.props.deleteTodo(id)
    }
  }

  render() {
    const {id,name,done} = this.props
    return (
      <div>
        <li style={{backgroundColor:this.state.mouse?'#ddd':'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
          <label>
            <input onChange={this.handleCheck(id)} type="checkbox" checked={done}/>
            <span>{name}</span>
          </label>
          <button onClick={()=>this.handleDelete(id)} className="btn btn-danger" style={{ display:this.state.mouse? 'block':'none' }}>
            删除
          </button>
        </li>
      </div>
    );
  }
}
